import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { ChevronDown } from 'lucide-react';

const Faq = () => {
  const faqData = [
    {
      question: '使用红小匠·AI会被平台限流吗？',
      answer: '绝对不会。我们所有的操作都基于小红书官方开放的数据接口，并通过模拟正常用户的行为进行分析，不涉及任何可能导致限流的违规操作。您的账号安全是我们设计的最高优先级。'
    },
    {
      question: 'AI生成的内容可以直接发布吗？',
      answer: '我们建议您将AI生成的内容作为高质量的初稿。AI能为您节省90%的构思和撰写时间，但我们鼓励您在发布前加入自己独特的风格和见解，让内容更具个人魅力，效果会更佳。'
    },
    {
      question: '我可以在多个小红书账号上使用吗？',
      answer: '可以的。我们的套餐支持绑定多个小红书账号，您可以根据所选的套餐计划，在不同的账号间轻松切换，进行统一管理和运营，非常适合矩阵化运营的团队和个人。'
    },
    {
      question: '数据分析的准确性如何？',
      answer: '我们的数据来源于小红书官方渠道和全网公开数据，并通过多重数据源进行交叉验证，确保了行业领先的准确性。数据每小时更新，帮助您实时掌握最新动态。'
    }
  ];

  const [activeIndex, setActiveIndex] = useState<number | null>(null);

  const toggleFaq = (index: number) => {
    setActiveIndex(activeIndex === index ? null : index);
  };

  return (
    <section id="faq" className="faq">
      <div className="container">
        <div className="section-header">
          <h2>常见问题解答</h2>
          <p>在这里找到您关心问题的答案，如果仍有疑问，欢迎随时与我们联系。</p>
        </div>
        <div className="faq-container">
          {faqData.map((item, index) => (
            <div key={index} className="faq-item">
              <button className="faq-question" onClick={() => toggleFaq(index)}>
                <span>{item.question}</span>
                <motion.div
                  animate={{ rotate: activeIndex === index ? 180 : 0 }}
                  transition={{ duration: 0.3 }}
                >
                  <ChevronDown size={20} />
                </motion.div>
              </button>
              <AnimatePresence>
                {activeIndex === index && (
                  <motion.div
                    initial={{ opacity: 0, height: 0 }}
                    animate={{ opacity: 1, height: 'auto' }}
                    exit={{ opacity: 0, height: 0 }}
                    transition={{ duration: 0.3, ease: 'easeInOut' }}
                    className="faq-answer-container"
                  >
                    <p className="faq-answer">{item.answer}</p>
                  </motion.div>
                )}
              </AnimatePresence>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Faq; 